// jQuery概述
// 1.1 javascript库
// 仓库：可以把很多东西放到仓库里面，找东西只需要到仓库里面查找到就可以了。
// javaScript库：即libraryu,是一个封装好的特定集合(方法和函数)。从封装一大堆
// 函数的角度理解库，就在这个库中，封装了很多预先定义好的函数里面，比如动画
// animate、hide、show、比如获取元素等。


// 常见的JavaScript库
// 1.jQuery
// 2.Prototype
// 3.YUI
// 4.Dojo
// 5.Ext JS
// 6.移动端的zepto

// 这些库都是对原生javaScript的封装，内部使用都是javaScript实现的，我们主要学习jQuery。


// 1.2 jQuery的概念
// jQuery是一个快速、简介的JavaScript库，其设计的宗旨是"write Less, Do More",
// 即提倡写的更少的代码，做更多的事情。

// j就是JavaScript；Query查询：意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。

// jQuery封装了JavaScript常用的功能代码，又花了DOM操作、事件处理、动画设计和Ajax交互。
// 学习jQuery本质：就是学习调用这些函数(方法)。



// jQuery的优点：
    // 1.轻量级。核心文件才几十kb，不会影响加载速度
    // 2.跨浏览器兼容。基本兼容了现在主流的浏览器
    // 3.链式编程、隐式迭代
    // 4.对事件、样式、动画支持，大大简化了DOM操作
    // 5.支持插件扩展开发。有着丰富的第三方插件，例如：
        // 树形菜单、日期控件、轮播图等。
    // 6.免费、开源








// 2的基本使用

// 2.1jQuery的下载
    // 官方网址:https://jquery.com/

    // 版本：
        // 1x：兼容IE 6、7、8等低版本浏览器，官网不在更新
        // 2x：不兼容IE 6、7、8等浏览器，官网不在更新
        // 3x：不兼容IE 6、7、8等低版本浏览器，是官方主要更新维护的版本




// production和development的区别
// production是用来在生产环境中的(代码已经经过压缩)
// development是用在开发环境中的(代码未压缩)







// 等页面DOM加载完毕再去执行js代码

// 1.等DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。
// 2.相当于原生js中的DOMContentLoaded。
// 3.不同于原生js中的load事件是等待页面文档、外部的js文件、css文件，图片加载完毕才执行内部代码。


// jQuery的入口函数写法(四种)
// 写法1
$(document).ready(function() {
    // 入口
    $('div').hide();   
})


// 写法二(推荐使用这种)
$(function() {
    // 入口
    $('div').hide();
})

// 方法三
jQuery(document).ready(function(){
    // 入口
})


// 方法四
jQuery(function(){
    // 入口
})




// 2.2 jQuery的顶级对象$
// 1.$是jQuery的别称，在代码中可以使用jQuery代替$，但一般为了方便，通常都是直接使用$。
// 2.$是jQuery的顶级对象，相当于原生js的window，把元素利用$封装成jQuery对象，
    // 就可以调用jQuery的方法。



// jQuery对象和DOM对象
    // 1.用原生js获取来的对象就是DOM对象。
    var div = document.querySelector('div');   //DOM对象
    console.dir(div);
    
    // 2.jQuery方法获取的元素就是jQuery对象。
    $(function() {
        // $('div');   //jQuery对象
        console.dir($('div'))
    })

    // 3.jQuery对象本质是：利用$对DOM对象包装后产生的对象(伪数组形式存储)。







// DOM对象于jQuery对象之间是可以相互转换的。
// 因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，
    // 要想使用这些属性和方法就需要把jQuery对象转换成DOM对象才能使用。


    // 1.DOM对象转换成jQuery对象：$(DOM对象)
    var div = document.getElementsByTagName('div')[0];
    $(div).hide();


    // 2.jQuery对象转换为DOM对象(两种方式)
    $('div')[index]  //index是索引号
    $('div').get(index) //index是索引号


    // 例如(jQuery中没有play方法，所以需要先把jquery对象转换成dom对象)：
    // 方法一
    $('video')[0].play();
    // 方法二
    $('video').get(0).play();








// jQuery常用的API
    // 1.常用的选择器
    // 2.操作样式
    // 3.常用的动画
    // 4.操作属性
    // 5.操作元素
    // 6.操作元素尺寸、位置






// 1.jQuery常用选择器
// 原生js获取元素的方式很多，很杂，而且兼容性不一致，因此jQuery给我们封装了，使获取元素同一标准。
$('选择器')   //里面选择器直接写css选择器即可，但是要加引号


// 名称             用法                描述
// ID选择器         $('$id')            获取制定ID的元素
// 全局选择器       $('*')              匹配所有元素
// 类选择器         $('.clsss')         获取同一类class的元素
// 标签选择器       $('div')            获取同一类标签的所有元素
// 并集选择器       $('div,p,li')       选取多个元素
// 交集选择器       $('li.current')     交集元素
// 后代选择器       $('ul>li')          使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层的元素
// 后代选择起       $('ul li')          使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子元素’




// jQuery筛选选择器
// 语法                 用法                描述
// :first               $('li:first')       获取第一个li元素
// :last                $('li:last')        获取最后一个li元素
// eq(index)            $(li:eq(2))         选择第二个li元素(index从0开始)
// odd                  $(li:odd)           选择li中的奇数
// even                 $(li:even)          选择li中的偶数





// jQuery筛选方法(重点)

// 语法                 用法                            说明
// parent()             $("li").parent();               查找父级
// parents()            $('li').parents('哪个父级'));   返回元素的第n层祖先
// children(selector)   $("ul").children('li')          相当于$("ul>li"),最近一级(亲儿子)
// find(selector)       $("ul").find("li");             相当于$('ul li'),后代选择器
// siblings(selector)   $(".first").siblings("li")      查找兄弟节点，不包括自己本身
// nextAll([expr])      $('.first').nextAll()           查找当前元素之后的所有同辈元素
// prevAll([pxpr])      $('.last').prevAll()            查找当前元素之前的所有同辈元素
// hasClass(class)      $('div').hasClass('protected')  检查当前元素是否含有特定的类，如果有则，则返回true
// eq(index)            $("li").eq(2)                   相当于$(li:eq(2)),index从0开始






// jQuery排他思想(干掉所有人留下我自己)
// 例如：(做一个选项卡的功能)
$(function() {
    $('input').click(function() {
        // 1.当点击某一个按钮的时候，背景颜色变成红色
        $(this).css('background-color','red')
        // 2.其他颜色变回默认的颜色
        $(this).siblings().css('background-color','')
    })
})



// 2.隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css方法。
// 例如(使用原生的方法)：给所有div设置一个颜色
window.onload = function() {
    var div = document.getElementsByTagName('div');
    for(var i = 0; i < div.length; i ++) {
        console.log(div[i])
        div[i].style.backgroundColor = 'red';
    }
}


// 例如2(使用jQuery的方法): 给所有div设置颜色
$(function() {
    $('div').css('background-color','red');
})






// show()                   显示元素
// hide()                   隐藏元素
// $(this)                  相当于原生js中的this
// $(this).index()          获取索引号
























// 2.操作样式
    // 2.1获取元素的属性(如果只写了属性名儿没有写属性值，就是返回元素的属性值)
    $('div').css('width') // 获取元素的宽度


    // 2.2修改元素的样式(方法一)
    $('div').css('width', '100px').css('height', '100px');

    // 2.2修改元素样式(方法二)
    $('div').css({
        'background-color' : 'red',
        width : 200,
        height : 200,
        color : 'black',
        'text-align' : 'center',
        'line-height' : '200px',
    })

    // 2.2修改元素的样式(方法三)(如果是复合属性，必须要采用小驼峰式命名法)
    $('div').css({
        width : '200px',
        height : '200px',
        color : 'red',
        backgroundColor : 'green',
        textAlign : 'center',
        lineHeight : '200px',
    })

    


    // 设置类和删除类
    $(this).addClass('tag')  //设置
    $(this).removeClass();   //删除
    // jquery类操作于className的区别
    // 原生js中className会覆盖元素原先里面的类名。
    // jquery里面类操作只是对指定类进行操作，不影响其他类名。


    // 切换类
    $(this).toggleClass('tag');  //如果你有这个类删除，如果没有就加上
































// 3.jquery给我们封装了很多动画效果，最为常见的如下：
    // 显示隐藏
        $('div').show();
            // 1.语法规范
                show(speed, easing, fn);
            // 2.显示参数
                // 2-1.参数都可以省略，吴动画直接显示。
                // 2-2. speed：三种预定速度之一的字符串('slow','normal','or','fast')或表示动画时长的毫秒数值(如:1000)。
                // 2-3. easing:(Optional)用来指定切换效果，默认是'swing',可用参数'linear'
                // 2-4. fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
        $('div').hide();  //参数和show一样
        $('div').toggle();   //切换  参数和show一样
    
    // 滑动
        // 参数和show方法一致
        $('div').slideDown();  //下拉
        $('div').slideUp();    //上拉
        $('div').slideToggle(); //上拉、下拉 切换


    // 事件切换
        $('div').hover(over, out); 
            // 注意：如果hover里面只写一个函数那么鼠标经过和离开都会执行该函数。
            // 1.over：鼠标移到元素上要出发的函数(相当于mouseenter)(可省略，用空字符串代替或者用null代替)
            // 2.out：鼠标移出元素要出发的函数(相当于mouseleave)

    // 取消动画队列的方法stop()  (动画队列就是当你在短时间内执行多次动画的时候就会出现动画排队的效果)
        // stop的作用就是结束上一次动画
        // stop()方法必须写在动画的前面
        // 例如：
            $(function() {
                $('button:last').hover(function() {
                    $('div').stop().slideToggle(500, 'swing');
                })
            })


    // 淡入淡出
        // 下面三个方法的参数和show方法一致
        $('div').fadeIn();    //淡出显示
        $('div').fadeOut();   //淡出隐藏
        $('div').fadeToggle();  //淡入淡出切换
        $('div').fadeTo();
            // fadeTo有四个参数
                // 1.speed 设置一个速度
                // 2.opacity 设置透明度
                // 3.easing 设置切换的效果
                // 4.fn  制定一个回调函数 

    // 自定义动画
        $('div').animate(params, speed, easing, fn);
        // 参数：
            // 1.params:想要更改的样式属性，以对象的形式传递，必须写。
            // 2.speed：设置动画时长
            // 3.easing：Optional用来指定切换效果，默认是swing,可用参数linear
            // 4.fn : 回调函数，在动画完成的时候执行该函数。
        
        // 例如：
            $(function() {
                $('input').click(function() {
                    $('div').animate({
                        left : 300,
                        top : 300,
                        width : 300,
                        height : 300,
                        textAlign : 'center',
                        lineHeight : 300,
                        fontSize : 30,
                    }, 2000, 'swing', function() {
                        $(this).css('backgroundColor', 'red')
                    })
                })
            })







// 4.jquery属性操作
    // 4.1设置或获取元素固有属性值prop()
        // 所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href,比如<input>里面的type。
            // 获取属性值的方法：
                $('a').prop('属性名');
            // 设置属性值的方法：
                $('a').prop('属性名','属性值')

    // 4.2元素的自定义属性 我们通过 attr()来获取和设置。
        // 获取属性语法
        $('div').attr('属性')  //类似于getAttribute()
        // 设置属性语法
        $('div').attr('属性','属性值') //类似原生setAttribute()



    // 4.3 data数据缓存
        // data()方法可以再制定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据将被移除。
        // 存取方法
        $('span').data('index','tag');
        // 获取方法
        $('span').data('index')

        // 这个方法获取data-index h5自定义属性 第一个不用谢data- 而且返回的是数字类型的
        $('div').data('index');









// jQuery内容文本值
    // 主要针对元素的内容还有表单的值操作
    // 1.普通元素内容html() (相当于inner HTML)
        // 获取内容
            $('div').html();
        // 设置内容
            $('div').html('内容')

    // 2.设置元素的文本内容
        // 获取内容
            $('div').text();
        // 设置内容
            $('div').text('内容');

    // 3.获取表单的值val() 等价于原生js中的value这个属性
        // 获取值
            $('input').val();
        // 设置属性值
            $('intpu').val('内容')









// 5.jquery元素的操作
    // 主要是遍历、创建、添加、删除元素等操作
        // 遍历DOM对象
            // jquery隐式迭代是对同一类元素做了相同的操作，如果想要给同一类元素做不同操作，就需要用到遍历。
            // 语法：
                // each()方法遍历匹配的每一个元素，主要用DOM处理。earch每一个
                // 里面的回调函数有两个参数:index是每一个元素的索引号，domEle是每一个DOM元素对象，不是jquery对象。
                $('div').each(function(index, domEle) {
                    console.log(index, domEle);
                })


                // 案例(给每个元素设置不同的颜色可以用这个方式)：
                    $(function() {
                        var arr = ['blue', 'red', 'pink']
                        $('li').each(function(index, domElement) {
                            $(domElement).css('color', arr[index])
                        })
                    })
        // 遍历数据(可以遍历对象和数组)
            // 第一个参数是需要遍历的对象
            // 第二个参数是一个回调函数
            $.each(obj, function(index, element) {
                console.log(index, element);
            })

    


    // 创建元素
        // 语法：
        var li = $('<li>使用jquery创建元素</li>')
    
    // 添加元素
        // append方法 内部添加放到元素的后面
        $('ul').append(li);

        // prepend方法 内部添加放到元素的最前面
        $('ul').prepend(li);
        
        // after 在元素的后面添加
        $('ul').after(div);

        // before 在元素的前面添加
        $('ul').before(div);

        // 删除元素本身
        $('li:eq(0)').remove();

        // 删除匹配的元素集合中的所有子节点
        $('ul').empty();

        // 清空匹配的元素内容
        $('ul').html("")















// 5.jQuery事件注册
    // 事件
        // onabort	    图像加载被中断
            // onerror	    当加载文档或图像时发生某个错误
            // onload	    某个页面或图像被完成加载
            // onblur	    元素失去焦点
            // onfocus  	元素获得焦点
            // onchange	    用户改变域的内容
            // onclick	    鼠标点击某个对象
            // ondblclick	鼠标双击某个对象
            // onkeydown	某个键盘的键被按下
            // onkeypress	某个键盘的键被按下或按住
            // onkeyup	    某个键盘的键被松开
            // onmousedown	某个鼠标按键被按下
            // onmousemove	鼠标被移动
            // onmouseout	鼠标从某元素移开
            // onmouseover	鼠标被移到某元素之上
            // onmouseup	某个鼠标按键被松开
            // onreset	    重置按钮被点击
            // onresize 	窗口或框架被调整尺寸
            // onselect 	文本被选定
            // onsubmit	    提交按钮被点击
            // onunload	    用户退出页面
            // scroll       滚动条滚动事件给window绑定
            // 例如：
                $(window).scroll(function() {
                    console.log($(this).scrollTop()) //获取滚动条卷去的距离
                })


    // 单个事件注册
        // 语法：
            element.事件(function() {})

            $('div').click(function() {
                // 事件处理程序
            })
            

    // 事件处理on()方法 优势1：
        // on()方法在匹配元素上绑定一个或多个事件处理函数
        // 语法
            $('div').on({
                click : function() {},
                mouseenter : function() {},
                mouseout : function() {}
            })

        // 如果要设置切换的效果可以这样写
            $('div').on('mouseenter mouseout', function() {
                alert('demo')
            })
    
    // on()方法 优势二(事件委托)：
        // 可以事件委派(或者说委托)，事件委派的定义就是把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
        // 例如：(需要给li绑定事件，利用事件委派的方法，给ul绑定然后委派给li)
            // on('需要绑定的时间', '委托给谁', function() {})
            $('ul').on('click', 'li', function() {})
            // 在此之前有bing(),live(),delegate()等方法来处理事件绑定或者事件委派，最新版本我们用on来代替他们。


    
    // on() 方法 优势三:
        // 可以给动态创建的元素绑定上并且生效



    
    // off() 解绑事件
        // off()方法可以移除通过on() 方法添加的时间处理程序。


        // 解除所有绑定事件
        var count = 0;
        $('div').click(function() {
            count ++;
            if(count == 10) {
                $(this).off();
            }
            console.log(count);
        })


        // 解除指定的事件
        $('div').off('mouseout mouseenter');


        // 解除事件委托
        $('ul').off('mouseenter', 'li')



    // 只能触发一次该事件 one();
        $('div').one('click', function() {})


    // 自动触发事件 trigger();
        // 有些事件希望自动触发，比如轮播图自动播放功能更点击右侧按钮一致，
        // 可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。


        // 自动触发事件 方法1(简写)：
            $('div').click();
        // 自动触发事件 方法2：
            $('div').trigger('click');

        // 自动触发事件 方法3：(这个方法不会触发事件的默认行为，input[type='text']当鼠标聚焦的时候，光标闪烁就属于默认行为)
            $('div').triggerHandler('click');



    
    

    // 事件对象
        $('div').on('click', function(event) {
            console.log(event);
        })

    // 阻止默认行为(默认事件)
        $('div').on('click', function(e) {
            // 方法1
            e.preventDefault();

            // 方法二
            return false;



            // 阻止冒泡
            e.stopPropagation();
        })





    




    // jquery的其他方法：
        // 1.jquery对象的拷贝方法
        // 2.jquery多库共存的2种方法
        // 3.使用jquery插件


    


    // 1.jquery对象拷贝
        // 如果想要把某个对象拷贝(合并)给另外一个对象使用，此时可以使用$.extend()方法。
        // 语法
            $.extend([deep], target, object1, [objectN]);
            // deep：如果设置为true为深拷贝，默认为false浅拷贝
            // target: 源对象(把target拷贝给object1)
            // object1：目标对象
            // 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
            // 深拷贝，前面加true，完全克隆(拷贝的对象，而不是地址)，修改目标对象不会影响被拷贝对象。

        // 例如需要把obj拷贝targetObj：
            var targetObj = {
                id : 10,
                text : 'text',
            };
            var obj = {
                age : 18,
                sex : 'male',
                name : 'zhangsan',
                id : 1,
                demo : {
                    language : 'javaScript',
                }
            }
            // 深层拷贝
            $.extend(true, targetObj, obj);
            // 浅层拷贝
            // $.extend(targetObj, obj)
            console.log(obj);
            console.log(targetObj);


    // 2.jquery多库共存。
        // 问题描述：
            // jQuery使用$作为标识符，随着jQuery的流行，其他js库也会用$作为标识符，这样一起使用会引起冲突。
        
        // 客观需求
            // 需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。

        // jQuery解决方案：
            // 1.把里面的$符号统一改为jQuery，比如jQuery('div');
            // 例如：
                jQuery(function() {
                    jQuery('div').on('click', function() {
                        console.log(jQuery(this));
                    })
                })


            // 2.jQuery变量规定新的名称：$noConflict()  var xx = $.noConflict();
            // 让jquery释放$ 的控制权 让用户自己决定 用什么方式来控制
                var test = $.noConflict();
                test(function() {
                    console.log(test('div'));
                })
    



    // 3.jquery插件
    // jQuery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成。
    // 注意：这些插件也是以来jQuery来完成的，所以必须要先引入jQuery文件，因此也称为jQuery插件。
    // jQuery插件常用的网站：
        // jQuery插件库：http://www.jq22.com/
        // jQuery之家：http://www.htmleaf.com/(推荐 该网站免费开源)


    
    // 图片懒加载(图片使用延边加载在可提高网页下载速度，它也能减轻服务器负担)
        // 只加载用户看到的页面(当我们把页面滑动到可视区域，在显示图片)。
        // 如果需要只需要到jQuery插件库里面搜索(懒加载)下载该插件即可


    // 全屏滚动(fullpage.js)
        // gitHub:https://github.com/alvarotrigo/fullPage.js
        // 中文翻译网站: http://www.dowebok.com/demo/2014/77/





        

// jQuery尺寸、位置操作
    // jQuery尺寸(语法)
    // width() /height()                    获取元素高度和宽度值 只算width/height
    // innerWidth() / innerHieght()         获取元素宽度和高度值 包含padding
    // outerWidth() / outerHeight()         获取元素宽度和高度   包含padding 、 border
    // outerWidth(true) / outerHeight(true) 获取元素宽度和高度   包含padding、border、margin
    
    // 1.以上参数为空，则获取相应的值，返回是数字类型。
    // 2.如果以上参数为数字，则修改响应的值。
    // 3.参数可以不必写单位。




    // 例如：
        $('div').width();



    


    // jquery位置操作
        // 位置主要有三个：offset()、position()、scrollTop()/scrollLeft()
        
        // 1.offset() 设置或获取元素偏移
            // 1-1：offset()方法设置或返回被选元素相对于文档的偏移坐标、跟父级没有关系。
            // 1-2：该方法有2个属性 left top  offset().top     offset().left
            // 1-3：可以设置元素偏移：offset({top : 10, left : 30})
            // 例如：
                // 元素的位置top和left
                $('div').offset()   //获取元素距离文档的top和left，返回的是一个对象
                // 设置元素的位置top和left
                $('div').offset({
                    top : 200,
                    left : 200
                })
        
        // 2.position() 获取元素偏移
            // 2-1：position() 方法用于返回被选定元素相对于带有定位的父级偏移量，如果父级都没有定位，则以文档为基准。

            // 例如：
                $('div').position();
        



        // 3.scrollTop() / scrollLeft() 设置或获取元素被卷去的头部和左侧
            // 3-1：scrollTop()方法设置或返回被选元素被卷去的头部


            // 例如：
                $(document).scrollTop()  //获取文档卷去的距离
                $(document).scrollTop(100)  //设置文档卷去的距离

            
        
        // 4.带有动画的返回顶部
            // 4-1：核心原理，使用animate动画返回顶部
            // 4-2：animate动画函数里面有个scrollTop属性，可以设置位置
            // 4-3：但是是元素做动画，因此$('body,html').animate({scrollTop:0})


            // 例如：
                $('body,html').animate({scrollTop: 0})


